import React, { useEffect, useState } from 'react';
import {
  Grid,
  Input,
  Button,
  Space,
  Pagination,
  Message,
} from '@arco-design/web-react';
import styles from './style/index.module.less';
import Person from '@/pages/organizational/management/person';
import {
  getMajorStudentApi,
  getMajorTeacherApi,
  getOneByIdApi,
  getTreeApi,
} from '@/request/api';
import OrganizationTree from '@/pages/organizational/management/organizationTree';
const Row = Grid.Row;
const Col = Grid.Col;

function Architecture() {
  const [treeData, setTreeData] = useState([]);
  const [copyTreeData, setCopyTreeData] = useState([]);
  const [selectedInfo, setSelectedInfo] = useState({
    collegeId: null,
    college: null,
    majorId: null,
    major: null,
  });

  const [teachers, setTeachers] = useState([]);
  const [students, setStudents] = useState([]);

  useEffect(() => {
    fetchTree();
  }, []);

  useEffect(() => {
    if (selectedInfo.majorId) {
      fetchTeachersAndStudents();
    }
  }, [JSON.stringify(selectedInfo)]);

  const fetchTree = () => {
    getTreeApi()
      .then((res) => {
        const { data } = res;

        const newData = data.map((collage) => {
          collage.children.map((major) => {
            return { ...major, visible: false, visiblePlus: false };
          });
          return { ...collage, visible: false, visiblePlus: false };
        });

        setCopyTreeData(newData);
        setTreeData(newData);

        if (data[0] && data[0].children[0]) {
          const info = {
            collegeId: data[0].id,
            college: data[0].name,
            majorId: data[0].children[0].id,
            major: data[0].children[0].name,
          };
          setSelectedInfo(info);
        }
      })
      .catch((e) => {
        console.log(e);
      });
  };

  const fetchTeachersAndStudents = async () => {
    try {
      const studentRes = await getMajorStudentApi({
        sysDeptId: selectedInfo.majorId,
      });
      const teacherRes = await getMajorTeacherApi({
        sysDeptId: selectedInfo.majorId,
      });

      setStudents(studentRes.data);
      setTeachers(teacherRes.data);
    } catch (e) {
      console.log(e);
    }
  };

  const getSelectedInfo = (info) => {
    if (info.collegeId !== 0) {
      getOneByIdApi({ id: info.collegeId })
        .then((res) => {
          const { data } = res;
          setSelectedInfo({
            collegeId: info.id,
            college: data.name,
            majorId: info.majorId,
            major: info.major,
          });
        })
        .catch((e) => {
          console.log(e);
        });
    } else {
      Message.warning('请选择学院下的专业');
    }
  };

  return (
    <Row>
      <OrganizationTree
        copyTreeData={copyTreeData}
        treeData={treeData}
        setTreeData={(data) => setTreeData(data)}
        getSelectedInfo={(info) => getSelectedInfo(info)}
      />
      <Col span={20}>
        <div className={styles['arch-right-container']}>
          <h3>{`学院:${selectedInfo.college}`}</h3>
          <h4>{`专业:${selectedInfo.major}`}</h4>

          {/*老师*/}
          {/*<Input.Search*/}
          {/*  style={{*/}
          {/*    marginBottom: 8,*/}
          {/*    marginTop: 8,*/}
          {/*    maxWidth: 240,*/}
          {/*  }}*/}
          {/*  placeholder={'请输入老师姓名或工号'}*/}
          {/*/>*/}
          <Row
            align={'center'}
            justify={'space-between'}
            className={styles['teacher-row']}
          >
            <h3>授课老师</h3>
            {/*<Button type="outline" size={'small'}>*/}
            {/*  添加*/}
            {/*</Button>*/}
          </Row>
          <div className={styles.list}>
            {teachers.map((item) => {
              return <Person key={item.id} info={item} />;
            })}
          </div>

          {/*学生*/}
          {/*<Input.Search*/}
          {/*  style={{*/}
          {/*    marginBottom: 8,*/}
          {/*    marginTop: 8,*/}
          {/*    maxWidth: 240,*/}
          {/*  }}*/}
          {/*  placeholder={'请输入学生姓名或学号'}*/}
          {/*/>*/}
          <Row
            align={'center'}
            justify={'space-between'}
            className={styles['teacher-row']}
          >
            <h3>学生</h3>
            {/*<Button type="outline" size={'small'}>
              添加
            </Button>*/}
          </Row>
          <div className={styles.list}>
            {students.map((item) => {
              return <Person key={item.id} info={item} />;
            })}
            {/*<div className={styles['pagination']}>*/}
            {/*  <Pagination total={students.length} pageSize={3} size={'mini'} />*/}
            {/*</div>*/}
          </div>
        </div>
      </Col>
    </Row>
  );
}

export default Architecture;
